<template>
  <div>
    <!-- 头部区域 -->
    <van-nav-bar
      title="评论"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight">
      <template #right>
        <van-icon name="success" size="18" />
      </template>
    </van-nav-bar>

    <!-- 评分区域 -->
    <van-cell title="味道"
    size="large"
    >
      <template #right-icon>
        <van-rate
          v-model="rate[0]"
          allow-half
          void-icon="star"
          void-color="#eee"
          touchable 
        />
        <span class="rate">{{rate[0].toFixed(1)}}</span>
      </template>
    </van-cell>
    <van-cell title="包装" size="large">
      <template #right-icon>
        <van-rate
          v-model="rate[1]"
          allow-half
          void-icon="star"
          void-color="#eee"
          touchable 
        />
        <span class="rate">{{rate[1].toFixed(1)}}</span>
      </template>
    </van-cell>
    <van-cell title="配送" size="large">
      <template #right-icon>
        <van-rate
          v-model="rate[2]"
          allow-half
          void-icon="star"
          void-color="#eee"
          touchable
        />
        <span class="rate">{{rate[2].toFixed(1)}}</span>
      </template>
    </van-cell>

    <!-- 评论区域 -->
    <van-field
  v-model="message"
  rows="2"
  autosize
  label="评论"
  type="textarea"
  maxlength="50"
  placeholder="请输入留言"
  show-word-limit
  size="large"
/>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      rate: [5.0,5.0,5.0],
      message: ''
    };
  },
  created() {
    console.log(this.$store.state.commentOrderID);
  },
  methods: {
    //点击左上角返回
    onClickLeft() {
      this.$router.go(-1);
    },
    //点击右上角提交
    async onClickRight() {
      // 检查填写是否完整 默认全五星好评
      if(this.message == '') return Toast.fail('请先填写评论内容');
      //提交请求
      const { data: res } = await this.$http.put('orderfood/' + this.$store.state.commentOrderID , {
        passengerReviews: this.message,
        rate: this.rate.join(' ')
      })
      Toast.success('评论成功');
      this.$router.push('/order')
    }
  }
};
</script>

<style lang="less" scoped>
.rate {
  color: #ffd21e;
  font-weight: 400;
  font-size: 16px;
  margin-left: 15px;
}
</style>
